import React,{useState} from 'react'
import './fbRecord.scss'
import {
  LeftOutlined,
  HeartTwoTone
} from '@ant-design/icons';
export default function fbRecord() {
  const [index,setIndex] = useState(1)
  const [list, setList] = useState([
    { _id: 1, name: '董胖胖', url: 'https://img1.baidu.com/it/u=2797824118,1826819377&fm=253&fmt=auto?w=500&h=666', title: '胖胖集选', price: '388', like: '0',state:1 },
    { _id: 2, name: '胖董胖', url: 'https://img1.baidu.com/it/u=2797824118,1826819377&fm=253&fmt=auto?w=500&h=666', title: '生委大都督', price: '499', like: '0', state: 2 },
    { _id: 3, name: '胖胖董', url: 'https://img1.baidu.com/it/u=2797824118,1826819377&fm=253&fmt=auto?w=500&h=666', title: '都督', price: '899', like: '0', state: 3 },
    { _id: 4, name: '董董胖', url: 'https://img1.baidu.com/it/u=2797824118,1826819377&fm=253&fmt=auto?w=500&h=666', title: '大都督', price: '999', like: '0', state: 4 }
  ])
  const [list2,setList2] = useState(['审核中','已拒绝','已发布','已出售'])
  return (
    <div>
      <div className="mythree_top">
        <p><LeftOutlined /></p>
        <h3>发布记录</h3>
        <div></div>
      </div>
      <div className='nav'>
        <p className={index===1?'active':''} onClick={()=>{setIndex(1)}}>审核中</p>
        <p className={index===2?'active':''} onClick={()=>{setIndex(2)}}>已拒绝</p>
        <p className={index===3?'active':''} onClick={()=>{setIndex(3)}}>已发布</p>
        <p className={index===4?'active':''} onClick={()=>{setIndex(4)}}>已出售</p>
      </div>
      <div className='fbWorks'>
        {list.filter(i=>i._id===index).map((item)=>(
          <div className="fb_box" key={item._id}>
            <div className="img">
              <img src={item.url} alt="" />
            </div>
            <div className='fb_box2'>
              <p>{item.title}</p>
              <p className='red'>￥{item.price}</p>
              <p className='gray'><HeartTwoTone twoToneColor="#a9a9a9" />{item.like}</p>
            </div>
            <div className='fb_state'>
              {list2[index-1]}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
